import { setCanvas } from "./setCanvas"
import { Query } from "./queryevent"
export const EventSearch = (map) => {
  // 回调函数拿到查询数据

  var arr = ref([])
  var arr1 = ref([])
  var arr2 = []
  // var arr3 = []
  // var arr4 = {}
  // var arr5
  var page = ref(1) //分页初始化页面为第一页
  var result = ref(false)
  var total = ref()

  // 调用封装的查询，设置回调函数，取回查询结果
  let heatVector
  let heatSource = new ol.source.Vector({})

  var high_source = new ol.source.Vector({})
  var source = new ol.source.Vector({})
  let draw
  // 定义回调,作用域全局
  // var callback1
  function Search() {
    // 接收传过来的回调
    // callback1 = callback
    /* 设置高亮图层-显示查询到的要素 */
    let canvas = setCanvas(map.value)
    var style = new ol.style.Style({
      image: new ol.style.Icon({
        img: canvas,
        imgSize: [canvas.width, canvas.height],
      }),
    })

    // high_source.value = new ol.source.Vector({})
    var high_layer = new ol.layer.Vector({
      source: high_source,
      title: "高亮图层",
      style,
    })
    map.value.addLayer(high_layer)

    activeDraw(map)
  }
  function activeDraw(map) {
    //创建画布
    var style = new ol.style.Style({
      fill: new ol.style.Fill({
        color: "rgba(255,255,255,.1)",
      }),
      stroke: new ol.style.Stroke({
        color: "rgba(255,255,255,.1)",
        width: 3,
      }),
    })
    var layer = new ol.layer.Vector({
      source: source,
      style,
    })
    map.value.addLayer(layer)

    draw = createDraw({
      type: "Box",
      source: source,
    })
    map.value.addInteraction(draw)
    draw.on("drawend", function (evt) {
      // source.value.clear()
      /* 1、拉框查询获取几何信息 */
      var geometry = evt.feature.getGeometry()
      var service = {
        name: "guanggu",
        layerId: 2,
      }
      /* 2、根据几何信息调用中地接口,实现要素查询 */
      Query.queryByGeom({
        geometry,
        service,

        callback: handleQuery,
      })

      draw.setActive(false) //画笔失活
      // map.value.removeInteraction(draw)
    })
  }
  function handleQuery(features) {
    // 判断是否查询到结果
    if (features) {
      high_source.clear()
      source.clear()
      high_source.addFeatures(features)
      heatSource.clear()
      onSuccess(features)
    } else {
      high_sourceClear()
    }
  }

  // function search() {
  // Search({ map, draw, source, callback: onSuccess })
  // }

  function onSuccess(res) {
    arr.value = []
    arr1.value = []
    arr2 = [] //清空数据
    // 控制列表弹窗
    result.value = true
    res.map((item) => {
      // 属性
      arr.value.push(item.values_.values_)
      // 取坐标
      arr2.push(item.geometryChangeKey_.target.flatCoordinates)
    })
    // console.log(arr2, 222)
    // console.log(arr.value, 123)
    // arr.value.map((item) => {
    //   arr3.push(item.事件等级)
    // })
    // // console.log(arr3, 333)
    // // console.log(arr2)
    // arr3 = arr3.map((num) => parseFloat(num) / 10)
    // // console.log(arr3) // [0.1, 0.2, 0.3]
    // for (var i = 0; i < arr2.length; i++) {
    //   arr4[arr2[i]] = arr3[i]
    // }

    // arr5 = Object.keys(arr4).map(function (key) {
    //   return [key.split(","), arr4[key]]
    // })

    // console.log(arr5)
    // 分页
    total.value = Math.ceil(arr.value.length / 3) * 10
    // console.log(total.value)
    // 初始渲染值
    for (var i = 0; i < 3; i++) {
      arr1.value.push(arr.value[i])
    }
  }
  // -------------------------------------------------
  //分页改变
  function handleCurrentChange(value) {
    page.value = value
    arr1.value = []
    for (var i = value * 3 - 3; i < value * 3; i++) {
      arr1.value.push(arr.value[i])
    }
  }

  //热力图
  function handleheat() {
    // console.log(map)
    result.value = false
    // setTimeout(() => {
    // 创建热力图层
    // let heatSource
    // heatVector
    // heatSource = new ol.source.Vector({})

    //创建一个Heatmap图层
    arr2.forEach((item) => {
      var point = new ol.Feature({
        geometry: new ol.geom.Point(item),
      })
      heatSource.addFeatures([point])
      heatVector = new ol.layer.Heatmap({
        //矢量数据源
        source: heatSource,
        //热点半径
        radius: 25,
        //模糊尺寸
        blur: 10,
      })
    })
    map.value.addLayer(heatVector)
    // }, 500);
  }

  // -----------------------------------------------------------------------------------

  function high_sourceClear() {
    draw.setActive(false) //画笔失活
    high_source.clear()
    source.clear()
    heatSource.clear()
  }

  return {
    Search,
    high_sourceClear,
    handleCurrentChange,
    handleheat,
    arr,
    arr1,
    result,
    page,
    total,
    heatSource,
  }
}
